<template>
  <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片布局 -->
    <el-card>
        <el-row>
            <el-col :span="8">
              <el-input placeholder="请输入内容" v-model="orderqueryinfo.query" class="input-with-select">
              <template #append>
              <el-button icon="el-icon-search" @click="getorderList"></el-button>
              </template>
      </el-input>
            </el-col>
        </el-row>

      <!-- 订单列表 -->
      <el-table :data="orderlist" stripe border>
           <el-table-column type="index"></el-table-column>
           <el-table-column label="订单编号" prop="order_number">
           </el-table-column>
           <el-table-column label="订单价格" prop="order_price">
           </el-table-column>
           <el-table-column label="是否付款" prop="pay_status">
              <template v-slot="scope">
                  <el-tag v-if="scope.row.pay_status===1" type="success" size="mini">已付款</el-tag>
                  <el-tag v-else type="danger" size="mini">未付款</el-tag>
              </template>
           </el-table-column>
           <el-table-column label="是否发货" prop="is_send">
           </el-table-column>
           <el-table-column label="下单时间" prop="create_time" :formatter="dataformat">
           </el-table-column>
           <el-table-column label="操作" width="180px">
            <template v-slot="scope">
             <el-button v-model="scope.row" type="primary" icon="el-icon-edit" size="mini" @click="showeditorderdialog"></el-button>
             <el-button type="success" icon="el-icon-location" size="mini" @click="showwuliuinfodialog"></el-button>
            </template>
           </el-table-column>
      </el-table>
    <!-- 添加分页 -->
    <el-pagination
      @size-change="handlecateSizeChange"
      @current-change="handlecateCurrentChange"
      :current-page="orderqueryinfo.pagenum"
      :page-sizes="5"
      :page-size="orderqueryinfo.pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 编辑对话框 -->
    <el-dialog title="修改地址" v-model="showeditorderdialogvisible" width="55%" @close="editorderdialogreset">
      <el-form :model="editorderForm" :rules="editorderruleFormrules" ref="editorderruleFormref" label-width="100px">
        <el-form-item label="省市区县" prop="address1">
          <!-- prop用来校验规则，与规则里的名称对应 -->
          <el-cascader :options="cityData" v-model="editorderForm.address1" >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="editorderForm.address2" >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showeditorderdialogvisible = false">取 消</el-button>
          <el-button type="primary" @click="showeditorderdialogvisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 物流信息展示框 -->
    <el-dialog title="物流信息" v-model="showwuliuinfodialogvisible" width="55%">
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in wuliuinfo" :key="index" :timestamp="activity.time">
          {{activity.context}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
import cityData from './citydata.js'
export default {
  data() {
    return {
      //   请求商品分类的参数
      orderqueryinfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 商品分类列表
      orderlist: [],
      // 总数据数
      total: 0,
      showeditorderdialogvisible: false,
      editorderForm: {
        address1: [],
        address2: ''
      },
      editorderruleFormrules: {
        address1: [
          { required: true, message: '请选择省市区县', trigger: 'blur' }
        ],
        address2: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      cityData: cityData,
      showwuliuinfodialogvisible: false,
      wuliuinfo: []
    }
  },
  created() {
    this.getorderList()
  },
  methods: {
    //   获取商品分类列表
    async getorderList() {
      const { data: res } = await this.$http.get('orders', {
        params: this.orderqueryinfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取订单列表失败')
      }
      this.orderlist = res.data.goods
      this.total = res.data.total
      console.log(this.orderlist)
    },
    // 监听size改变
    handlecateSizeChange(newsize) {
      this.orderqueryinfo.pagesize = newsize
      this.getorderList()
    },
    // 监听页码值改变
    handlecateCurrentChange(newnum) {
      this.orderqueryinfo.pagenum = newnum
      this.getorderList()
    },
    // 日期格式化
    dataformat: function(val) {
      var date = new Date(Number(val.create_time))
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + M + D + h + m + s
    },
    // 监听编辑按钮
    showeditorderdialog() {
      this.showeditorderdialogvisible = true
    },
    // 重置
    editorderdialogreset() {
      this.$refs.editorderruleFormref.resetFields()
    },
    // 物流信息
    async showwuliuinfodialog() {
      const { data: res } = await this.$http.get('kuaidi/1106975712662')
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.wuliuinfo = res.data
      console.log(this.wuliuinfo)
      this.showwuliuinfodialogvisible = true
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-cascader{
  width: 100%;
}
</style>
